<template>
  <div class="main">
    <div class="search">
      <div class="block">
        <span>标题</span>
        <el-input placeholder v-model="titleName" style="width:200px"></el-input>
      </div>
      <div class="block">
        <el-button type="primary" style="width:80px" @click="search()" size="small">查询</el-button>
      </div>
    </div>
    <div class="userTable">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="ID" label="ID" width="80" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" width="220" align="center"></el-table-column>
        <el-table-column prop="watchNumber" label="查看数" width="100" align="center"></el-table-column>
        <el-table-column prop="commnetsNum" label="评论数" width="100" align="center"></el-table-column>
        <el-table-column prop="essence" label="精华" width="100" align="center">
          <template slot-scope="scope">
            {{scope.row.essence == 0 ? '否':''}}
            {{scope.row.essence == 1 ? '是':''}}
          </template>
        </el-table-column>
        <el-table-column prop="hot" label="热门推荐" width="120" align="center">
          <template slot-scope="scope">
            {{scope.row.hot == 0 ? '否':''}}
            {{scope.row.hot == 1 ? '是':''}}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="240" align="center"></el-table-column>
        <el-table-column prop="options" label="操作" width="420" align="center">
          <template slot-scope="scope">
            <el-button @click="linkClick(scope.row)" type="primary" size="small">查看详情</el-button>
            <el-button @click="handleClick(scope.row)" type="primary" size="small">修改</el-button>
            <el-button
              v-if="scope.row.essence == 0"
              type="primary"
              size="small"
              @click="sureEssence(scope.row,1)"
            >加精</el-button>
            <el-button
              v-if="scope.row.essence == 1"
              type="primary"
              size="small"
              @click="sureEssence(scope.row,0)"
            >取消加精</el-button>
            <!-- <el-button @click="handleClick(scope.row)" type="primary" size="small">推荐</el-button> -->
            <el-button
              v-if="scope.row.hot == 0"
              type="primary"
              size="small"
              @click="sureHot(scope.row,1)"
            >推荐</el-button>
            <el-button
              v-if="scope.row.hot == 1"
              type="primary"
              size="small"
              @click="sureHot(scope.row,0)"
            >取消推荐</el-button>
            <el-button type="primary" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 模态框 -->
      <div class="shadow-model" v-if="editShow" @click="closeShow()">
        <div class="el-icon-circle-close close" @click="closeShow()"></div>
        <div class="add-w" @click="(e)=>{e.stopPropagation()}">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="标题">
              <el-input v-model="form.title" style="width:200px" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item label="内容">
              <EditorBar />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="edit(form)">修改</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EditorBar from "../../components/wangEnduit.vue"; // 引入富文本框
export default {
  name: "home",
  data() {
    return {
      tableData: [
        {
          ID: 1785,
          title: "IOS账号关联的疑问",
          watchNumber: "210",
          commnetsNum: "0",
          essence: 0,
          hot: 0,
          createTime: "2020-08-21 10:30:00",
        },
        {
          ID: 1783,
          title: "直播类产品",
          watchNumber: "210",
          commnetsNum: "0",
          essence: 0,
          hot: 0,
          createTime: "2020-08-21 10:30:00",
        },
      ],
      form: {
        title: "",
        content: "",
      },
      titleName: "",
      editShow: false,
      isEssence: 0,
    };
  },
  components: {
    EditorBar, // 引入富文本框
  },
  methods: {
    closeShow() {
      this.editShow = false;
    },
    edit(row) {
      this.form.title = row.title;
      this.closeShow();
    },
    handleClick(row) {
      this.form = row;
      this.editShow = true;
    },
    linkClick(row) {
      window.location.href = "http://www.gupowang.com/wenda/" + row.ID;
    },
    sureEssence(row, isEssence2) {
      alert(isEssence2 == 0 ? "取消加精" : "加精");
      this.form = row;
      this.form.essence = isEssence2;
    },
    sureHot(row, hot2) {
      alert(hot2 == 0 ? "取消推荐" : "推荐");
      this.form = row;
      this.form.hot = hot2;
    },
  },
  mounted() {
    console.log("生命周期mounted");
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "../../css/home.scss";
</style>